import React from 'react';
import {Text, TextInput, View} from "react-native";
import EButton from "../components/utils/EButton";


type LoginPageProp = {
    onLogin:(auid:string, token:string)=>void
}

type LoginPageStat = {
    auid:string
    token:string
}

export default class LoginPage extends React.Component<LoginPageProp, LoginPageStat> {
    constructor(props:any) {
        super(props);

        this.state = {
            auid:'admin',
            token:'admin'
        }
    }
    render() {
        return (
            <View style={{flexDirection:'row',justifyContent:'center'}}>

                <View style={{flexDirection:'column',width:280,marginTop:140}}>
                    <View>
                        <View style={{flexDirection:'row',marginTop:4,marginBottom:4}}>
                            <View style={{flexDirection:'row', width:72, height:40, justifyContent:'flex-start', alignItems:'center'}}><Text style={{marginRight:4,textAlign:'left'}}>{'用户账号:'}</Text></View>
                            <View style={{flexDirection:'row', flex:1, height:40}}>
                                <TextInput value={this.state.auid} style={{backgroundColor:'#fff', flex:1, height:40,textAlign:'left',borderRadius:4,marginRight:4}} onChangeText={(text)=>{this.setState({auid:text})}} />
                            </View>
                        </View>
                    </View>
                    <View>
                        <View style={{flexDirection:'row',marginTop:4,marginBottom:4}}>
                            <View style={{flexDirection:'row', width:72, height:40, justifyContent:'flex-start', alignItems:'center'}}><Text style={{marginRight:4,textAlign:'left'}}>{'用户密码:'}</Text></View>
                            <View style={{flexDirection:'row', flex:1, height:40}}>
                                <TextInput value={this.state.token} style={{backgroundColor:'#fff', flex:1, height:40,textAlign:'left',borderRadius:4,marginRight:4}} onChangeText={(text)=>{this.setState({token:text})}} />
                            </View>
                        </View>
                    </View>


                    <EButton style={{marginTop:10}} title={'登录'} onPress={()=>{this.onLogin()}}/>
                </View>

            </View>
        )
    }

    private onLogin() {
       this.props.onLogin(this.state.auid, this.state.token);
    }
}
